<template>
  <div class="tree-menu" v-loading="loading">
    <el-tabs type="card">
      <el-tab-pane v-for="(menu, index) in theModel" :key="index"  :label="menu.menuName">
        <my-tree :model="menu" ref="tree" :menuList="menu" :label="index" :selectKeys="selectKeys"></my-tree>
      </el-tab-pane>
    </el-tabs>
    <input type="button" value="打印选中菜单" @click="doTest">
  </div>
</template>

<script type='text/ecmascript-6'>
import {resetBreads} from '../../../smartLight/common/js/util.js'
var myData = [
  {
    'childNode': [
      {
        'childNode': [
          {
            'icon': '',
            'id': 242,
            'menuLevel': 3,
            'menuName': '旅游订单',
            'menuTop': 1,
            'menuUrl': '/',
            'buttonControl': '0',
            'supMenuID': 241
          },
          {
            'icon': '',
            'id': 243,
            'menuLevel': 3,
            'menuName': '签证订单',
            'menuTop': 2,
            'menuUrl': '/',
            'buttonControl': '0',
            'supMenuID': 241
          },
          {
            'icon': '',
            'id': 244,
            'menuLevel': 3,
            'menuName': '出团通知书',
            'menuTop': 3,
            'menuUrl': '/',
            'buttonControl': '0',
            'supMenuID': 241
          }
        ],
        'icon': '',
        'id': 241,
        'menuLevel': 2,
        'menuName': '订单管理',
        'menuTop': 1,
        'menuUrl': '/',
        'buttonControl': '0',
        'supMenuID': 240
      },
      {
        'childNode': [
          {
            'icon': '',
            'id': 246,
            'menuLevel': 3,
            'menuName': '旅游产品',
            'menuTop': 1,
            'menuUrl': '/tourProduct',
            'buttonControl': '0',
            'supMenuID': 245
          },
          {
            'icon': '',
            'id': 247,
            'menuLevel': 3,
            'menuName': '图库',
            'menuTop': 2,
            'menuUrl': '/basePicStore',
            'buttonControl': '0',
            'supMenuID': 245
          },
          {
            'icon': '',
            'id': 248,
            'menuLevel': 3,
            'menuName': '签证产品',
            'menuTop': 3,
            'menuUrl': '/',
            'buttonControl': '0',
            'supMenuID': 245
          }
        ],
        'icon': '',
        'id': 245,
        'menuLevel': 2,
        'menuName': '产品管理',
        'menuTop': 2,
        'menuUrl': '/',
        'buttonControl': '0',
        'supMenuID': 240
      },
      {
        'childNode': [
          {
            'icon': '',
            'id': 250,
            'menuLevel': 3,
            'menuName': '旅游广告',
            'menuTop': 1,
            'menuUrl': '/',
            'buttonControl': '0',
            'supMenuID': 249
          }
        ],
        'icon': '',
        'id': 249,
        'menuLevel': 2,
        'menuName': '广告管理',
        'menuTop': 3,
        'menuUrl': '/',
        'buttonControl': '0',
        'supMenuID': 240
      }
    ],
    'icon': '',
    'id': 240,
    'menuLevel': 1,
    'menuName': '业务中心',
    'menuTop': 1,
    'menuUrl': '/',
    'buttonControl': '0',
    'supMenuID': 0
  },
  {
    'childNode': [
      {
        'childNode': [
          {
            'icon': '',
            'id': 278,
            'menuLevel': 3,
            'menuName': '系统配置',
            'menuTop': 1,
            'menuUrl': '/baseConfig',
            'buttonControl': '0', // 控制按钮标识--新增参数
            'supMenuID': 277 // 上级菜单id--新增参数
          },
          {
            'icon': '',
            'id': 279,
            'menuLevel': 3,
            'menuName': '系统日志',
            'menuTop': 2,
            'menuUrl': '/baseSysLog',
            'buttonControl': '0',
            'supMenuID': 277
          },
          {
            'icon': '',
            'id': 280,
            'menuLevel': 3,
            'menuName': '菜单管理',
            'menuTop': 3,
            'menuUrl': '/baseMenu',
            'buttonControl': '0',
            'supMenuID': 277
          },
          {
            'childNode': [
              {
                'icon': '',
                'id': 346,
                'menuLevel': 4,
                'menuName': '新增',
                'menuTop': 1,
                'menuUrl': '/',
                'buttonControl': '1',
                'supMenuID': 281
              },
              {
                'icon': '',
                'id': 347,
                'menuLevel': 4,
                'menuName': '编辑',
                'menuTop': 2,
                'menuUrl': '/',
                'buttonControl': '1',
                'supMenuID': 281
              },
              {
                'icon': '',
                'id': 348,
                'menuLevel': 4,
                'menuName': '删除',
                'menuTop': 3,
                'menuUrl': '/',
                'buttonControl': '1',
                'supMenuID': 281
              },
              {
                'icon': '',
                'id': 349,
                'menuLevel': 4,
                'menuName': '权限控制',
                'menuTop': 4,
                'menuUrl': '/',
                'buttonControl': '1',
                'supMenuID': 281
              }
            ],
            'icon': '',
            'id': 281,
            'menuLevel': 3,
            'menuName': '角色管理',
            'menuTop': 4,
            'menuUrl': '/baseRole',
            'buttonControl': '0',
            'supMenuID': 277
          },
          {
            'icon': '',
            'id': 282,
            'menuLevel': 3,
            'menuName': '账号管理',
            'menuTop': 5,
            'menuUrl': '/adminAccount',
            'buttonControl': '0',
            'supMenuID': 277
          },
          {
            'childNode': [
              {
                'icon': '',
                'id': 358,
                'menuLevel': 4,
                'menuName': '批量删除',
                'menuTop': 1,
                'menuUrl': '/',
                'buttonControl': '1',
                'supMenuID': 283
              },
              {
                'icon': '',
                'id': 359,
                'menuLevel': 4,
                'menuName': '新增',
                'menuTop': 2,
                'menuUrl': '/',
                'buttonControl': '1',
                'supMenuID': 283
              },
              {
                'icon': '',
                'id': 360,
                'menuLevel': 4,
                'menuName': '编辑',
                'menuTop': 3,
                'menuUrl': '/',
                'buttonControl': '1',
                'supMenuID': 283
              },
              {
                'icon': '',
                'id': 361,
                'menuLevel': 4,
                'menuName': '删除',
                'menuTop': 4,
                'menuUrl': '/',
                'buttonControl': '1',
                'supMenuID': 283
              }
            ],
            'icon': '',
            'id': 283,
            'menuLevel': 3,
            'menuName': '消息管理',
            'menuTop': 6,
            'menuUrl': '/baseNotice',
            'buttonControl': '0',
            'supMenuID': 277
          },
          {
            'childNode': [
              {
                'icon': '',
                'id': 362,
                'menuLevel': 4,
                'menuName': '新增',
                'menuTop': 0,
                'menuUrl': '/',
                'buttonControl': '1',
                'supMenuID': 284
              },
              {
                'icon': '',
                'id': 363,
                'menuLevel': 4,
                'menuName': '详情',
                'menuTop': 1,
                'menuUrl': '/',
                'buttonControl': '1',
                'supMenuID': 284
              },
              {
                'icon': '',
                'id': 364,
                'menuLevel': 4,
                'menuName': '编辑',
                'menuTop': 2,
                'menuUrl': '/',
                'buttonControl': '1',
                'supMenuID': 284
              },
              {
                'icon': '',
                'id': 365,
                'menuLevel': 4,
                'menuName': '删除',
                'menuTop': 3,
                'menuUrl': '/',
                'buttonControl': '1',
                'supMenuID': 284
              }
            ],
            'icon': '',
            'id': 284,
            'menuLevel': 3,
            'menuName': '帮助中心',
            'menuTop': 7,
            'menuUrl': '/baseHelpList',
            'buttonControl': '0',
            'supMenuID': 277
          },
          {
            'icon': '',
            'id': 285,
            'menuLevel': 3,
            'menuName': '问题反馈',
            'menuTop': 8,
            'menuUrl': '/baseFeedback',
            'buttonControl': '0',
            'supMenuID': 277
          }
        ],
        'icon': '',
        'id': 277,
        'menuLevel': 2,
        'menuName': '系统管理',
        'menuTop': 1,
        'menuUrl': '/',
        'buttonControl': '0',
        'supMenuID': 276
      },
      {
        'childNode': [
          {
            'icon': '',
            'id': 287,
            'menuLevel': 3,
            'menuName': '城市插件',
            'menuTop': 1,
            'menuUrl': '/citySelect',
            'buttonControl': '0',
            'supMenuID': 286
          },
          {
            'icon': '',
            'id': 288,
            'menuLevel': 3,
            'menuName': 'highcharts图表',
            'menuTop': 2,
            'menuUrl': '/highcharts',
            'buttonControl': '0',
            'supMenuID': 286
          },
          {
            'icon': '',
            'id': 289,
            'menuLevel': 3,
            'menuName': 'G2图表',
            'menuTop': 3,
            'menuUrl': '/g2Chart',
            'buttonControl': '0',
            'supMenuID': 286
          },
          {
            'icon': '',
            'id': 366,
            'menuLevel': 3,
            'menuName': 'ECharts图表',
            'menuTop': 1,
            'menuUrl': '/ECharts',
            'buttonControl': '0',
            'supMenuID': 286
          },
          {
            'icon': '',
            'id': 372,
            'menuLevel': 3,
            'menuName': 'Tree',
            'menuTop': 5,
            'menuUrl': '/treeLd',
            'buttonControl': '0',
            'supMenuID': 286
          }
        ],
        'icon': '',
        'id': 286,
        'menuLevel': 2,
        'menuName': '系统插件',
        'menuTop': 2,
        'menuUrl': '/',
        'buttonControl': '0',
        'supMenuID': 276
      },
      {
        'childNode': [
          {
            'icon': '',
            'id': 291,
            'menuLevel': 3,
            'menuName': '城市信息',
            'menuTop': 1,
            'menuUrl': '/cityInfo',
            'buttonControl': '0',
            'supMenuID': 290
          }
        ],
        'icon': '',
        'id': 290,
        'menuLevel': 2,
        'menuName': '基础数据',
        'menuTop': 3,
        'menuUrl': '/',
        'buttonControl': '0',
        'supMenuID': 276
      }
    ],
    'icon': '',
    'id': 276,
    'menuLevel': 1,
    'menuName': '系统中心',
    'menuTop': 5,
    'menuUrl': '/',
    'buttonControl': '0',
    'supMenuID': 0
  }
]
import myTree from './treeMenu.vue'
export default {
  components: {
    myTree
  },
  data () {
    return {
      loading: true,
      theModel: myData,
      selectKeys: [277, 278, 280, 346, 347, 348, 349, 281, 242, 243, 249, 250, 241] // 选中的菜单id
    }
  },
  methods: {
    doTest () {
      var selKeys = []
      for (let i = 0; i < this.$refs.tree.length; i++) {
        var keys = this.$refs.tree[i].getAllKeys() // 获取选择菜单id数组
        selKeys.push(keys)
      }
      console.log(selKeys)
    }
  },
  created () {
    // 浏览器向前或向后处理
    resetBreads(this)
    this.loading = false
    // 权限vuex变量初始化
    // var length = this.theModel.length
    // var arr1 = new Array(length)
    // var arr2 = new Array(length)
    // this.$store.dispatch('updateMenuList', arr1)
    // this.$store.dispatch('updateSelKeys', arr2)
  }
}
</script>
